<template>
  <div>
    <my-checkbox />
    <p>{{ new Date() | formatTime }}</p>
    <son />

    <button @click="show = !show">显示/隐藏 p标签</button>
    <button @click="color = 'red'">把color变红</button>
    <!-- 例 -->
    <!-- 就要自定义一个color的指令 -->
    <p v-if="show" v-color="color">我是p标签</p>

    <son2 />
  </div>
</template>

<script>
import son from './components/son.vue'
import son2 from './components/son2.vue'
export default {
  components: {
    son,
    son2
  },

  data() {
    return {
      color: 'blue',
      show: false
    }
  },

  // // 写自定义指令的地方
  // directives: {
  //   // 指令名 : {
  //   //   inserted (el, binding) {

  //   //   },
  //   // }

  //   // color: {
  //   //   // inserted就是当指令绑定的标签插入到dom树时调用
  //   //   // 参数1：绑定指定的标签
  //   //   // 参数2：有指定的相关信息，
  //   //           // 是一个对象。里面最主要的属性是value，value就是这个指定绑定的值
  //   //   // 需求：指令绑定的值是什么，这个标签的文字颜色就是什么
  //   //   inserted (el, binding) {
  //   //     console.log('调用inserted了')
  //   //     // 相当于写的是 p.style.color = 'blue'
  //   //     el.style.color = binding.value
  //   //   },

  //   //   // update会当指令绑定的数据发生变化调用
  //   //   // 参数跟inserted的参数是一样的,并且binding有改变后的数据
  //   //   update (el, binding) {
  //   //     el.style.color = binding.value
  //   //   }
  //   // },

  //   // 指令的简写形式：
  //   // 当inserted里的代码和update里的代码一样的时候，就可以简写
  //   color (el, binding) {
  //     el.style.color = binding.value
  //   }
  // }


  // filters: {

  //   formatTime (val) {
  //     return '2022-08-22'
  //   }
  // }
}
</script>

<style>

</style>